<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>金句加载</title>
  <script src="node_modules\three\build\three.min.js"></script>
  <script src="node_modules\vanta\dist\vanta.waves.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    @keyframes logo {

      0%,
      50% {
        scale: 1;
      }

      25%,
      75% {
        scale: 1.15;
      }

      100% {
        scale: 1;
      }
    }

    @keyframes swing {
      0% {
        transform: rotate(12deg);
      }

      100% {
        transform: rotate(-12deg);
      }
    }

    .mask {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgb(30, 110, 185);
    }

    .mask .logo {
      position: absolute;
      left: 50%;
      top: 40%;
      translate: -60% 0;
      width: fit-content;

      animation: logo 3s ease infinite alternate,
        swing 2s infinite alternate;
    }

    .mask .logo p {
      width: fit-content;
      font-size: 46px;
      font-weight: 900;
      letter-spacing: -2.5px;
      padding: 0 5px;

      transform: skew(-15deg);

      color: rgb(185, 225, 243);
      background-color: black;
    }

    .mask .logo::before {
      display: block;
      content: '';
      position: absolute;
      right: -19px;
      top: 11px;

      line-height: 0;
      width: 19px;
      height: 60px;
      background-color: black;
      transform: skew(-15deg, 48deg);
    }

    .mask .logo::after {
      display: block;
      content: '';

      margin-top: 1px;
      line-height: 0;
      width: 280px;
      height: 20px;
      background-color: black;

      transform: skew(41deg);
    }

    #sentence {
      position: absolute;
      top: 64%;
      left: 50%;
      transform: translate(-50%, -50%);

      font-size: 30px;
      font-style: oblique;
      letter-spacing: 2px;
      /* color: rgb(160, 162, 165); */
      color: rgb(243, 244, 247);
    }

    .loading {
      position: absolute;
      bottom: 20%;
      left: 50%;
      translate: -50%;
      width: 100px;

      color: rgb(169, 170, 173);
      font-size: 12px;
      text-align: center;
    }

    .loading p {
      white-space: nowrap;
      overflow: hidden;
      animation: loading 1s infinite steps(3);
    }

    @keyframes loading {
      0% {
        width: 45px;
      }

      50% {
        width: 55px;
      }

      100% {
        width: 80px;
      }
    }
  </style>
</head>

<body>
  <div class="mask">
    <div class="logo">
      <p>SEA URCHIN</p>
    </div>
    <p id="sentence"></p>
    <div class="loading">
      <p>加载中。。。</p>
    </div>
  </div>
  <script>
    let sentence = document.getElementById('sentence')
    fetch('./jinju.json')
      .then(response => response.json())
      .then(data => {
        // 这里可以对导入的JSON数据进行操作
        let len = data.length
        sentence.innerHTML = data[Math.floor((Math.random() * len))]
        setInterval(() => {
          sentence.innerHTML = data[Math.floor((Math.random() * len))]
        }, 6000)
      })

    VANTA.WAVES({
      el: ".mask",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 0.5,
      scaleMobile: 1.00
    })
  </script>
</body>

</html>